<template>
  <!-- 自定义的列 -->
  <el-table-column
    v-if="type=='define'"
    :key="itemKey"
    :label="label"
    :width="width"
    :min-width="minWidth"
    :fixed="fixed"
    show-overflow-tooltip
    align="center"
  >
    <template
      slot="header"
      slot-scope="scope"
    >
      <slot
        v-if="expandTitle"
        name="title"
        :label="scope.column.label"
        :index="scope.$index"
      ></slot>
      <template v-else>{{scope.column.label}}</template>
    </template>
    <template slot-scope="scope">
      <slot
        :row="scope.row"
        :index="scope.$index"
      ></slot>
    </template>
  </el-table-column>
  <!-- 扩展的列 -->
  <el-table-column
    v-else-if="type=='expand'"
    :key="itemKey"
    type="expand"
    :label="label"
    :width="width"
    :min-width="minWidth"
    :fixed="fixed"
  >
    <template
      slot="header"
      slot-scope="scope"
    >
      <slot
        v-if="expandTitle"
        name="title"
        :label="scope.column.label"
        :index="scope.$index"
      ></slot>
      <template v-else>{{scope.column.label}}</template>
    </template>
    <template slot-scope="scope">
      <slot
        :row="scope.row"
        :index="scope.$index"
      ></slot>
    </template>
  </el-table-column>
  <!-- 普通的列 -->
  <el-table-column
    v-else
    :key="itemKey"
    :label="label"
    :width="width"
    :min-width="minWidth"
    :fixed="fixed"
    :sortable="sortable"
    :sort-method="sortMethod"
    show-overflow-tooltip
    align="center"
  >
    <template
      slot="header"
      slot-scope="scope"
    >
      <slot
        v-if="expandTitle"
        name="title"
        :label="scope.column.label"
        :index="scope.$index"
      ></slot>
      <template v-else>{{scope.column.label}}</template>
    </template>
    <template slot-scope="scope">
      <div :style="propStyle">{{scope.row[prop] | tableFilter(elFilter)}}</div>
    </template>
    <slot></slot>
  </el-table-column>
</template>

<script>
import anyfishUI from "../../index";
export default {
  name:"mm-table-item",
  props: {
    label: {// 列的名称
      type: String,
      default: null
    },

    type: {// prop、define、expand
      type: String,
      default: "prop"
    },

    width: {// 宽度，单位px，不传则自适应
      type: Number,
      default: null
    },

    minWidth: {// 最小宽度，单位px，不传则自适应
      type: Number,
      default: null
    },

    fixed: {// 固定位置，类型："left"、"right"
      type: String,
      default: null
    },

    prop: {// 列对应表格数据的字段名称
      type: String,
      default: null
    },

    propFilter: {// prop字段的显示，类型："/100"、formatData(type, option)
      type: [String, Function],
      default: null
    },

    propStyle: {// prop字段的样式
      type: String,
      default: null
    },

    sortable: {// 是否可以排序
      type: Boolean,
      default: false
    },

    expandTitle: {// 是否可以扩展表头
      type: Boolean,
      default: false
    }
  },

  computed: {
    itemKey() {
      return this.label + "-" + this.type + "-" + this.prop;
    },

    elFilter() {
      if (!this.propFilter) {
        return null;
      }
      if (typeof this.propFilter == "function") {
        return this.propFilter;
      }
      if (this.propFilter == "/100") {// 除100
        return function (value) {
          if (value) {
            let temp = value / 100;
            if (!isNaN(temp)) {
              return temp;
            }
          }
          return value;
        }
      }
      if (this.propFilter.startsWith("formatData(") && this.propFilter.endsWith(")")) {// formatData(type, option)
        let temp = this.propFilter.substring(11, this.propFilter.length - 1).split(",");
        let type = temp[0] ? temp[0].trim() : null;
        let option = temp[1] ? temp[1].trim() : null;
        return function (value) {
          if (type == "time") {
            return anyfishUI.api.getFormatTime(value, option);
          } else if (type == "timeLen") {
            return anyfishUI.api.getFormatTimeByLen(value, option);
          } else if (type == "timeNumber") {
            return anyfishUI.api.getTimeNumber(value);
          } else if (type == "date") {
            return anyfishUI.api.getDateByType(value, option);
          } else if (type == "price") {
            return anyfishUI.api.toPrice(value, option);
          } else if (type == "floorPrice") {
            return anyfishUI.api.toFloorPrice(value, option);
          }
          return true;
        }
      }
      return null;
    }
  },

  filters: {
    tableFilter(value, filter) {
      if (filter) {
        return filter(value);
      }
      return value;
    }
  },

  methods: {
    sortMethod(obj1, obj2) {
      if (obj1 && obj2) {
        let value1 = obj1[this.prop];
        let value2 = obj2[this.prop];
        if (typeof value1 == "string" && typeof value2 == "string") {
          return value1.localeCompare(value2);
        }
        return value1 - value2;
      }
      return obj1 - obj2;
    }
  }
}
</script>